<template>
    <el-row>
        <el-menu :default-active="$route.path" class="el-menu-demo" mode="horizontal" :ellipsis="false"
            @select="handleSelect" style="height: 70px;width: 100%;margin: 0 auto;" :router="true">
            <el-menu-item index="/" style="padding: 0px;border: none;" class="logo">
                <div style="height: 100%;">
                    <el-image style="width: 100%; height: 100%"
                        src="http://photo.jlyproject.cn/daca9e8d-1b5d-442e-8264-a5e88693c1c0.png" :fit="fit" />
                </div>
            </el-menu-item>
            <div style="display: flex;">
                <div style="display: flex;height: 70px;">
                    <el-menu-item index="/tag/newArticle/">新闻资讯</el-menu-item>
                    <el-menu-item index="/tag/activity/">精彩活动</el-menu-item>
                    <el-menu-item index="/tag/sight/">红色景点</el-menu-item>
                    <el-menu-item index="/tag/person/">人物故事</el-menu-item>
                    <el-menu-item index="/tag/culture/">红色文化</el-menu-item>
                    <el-menu-item index="/tag/history/">红色历史</el-menu-item>
                </div>
            </div>
            <el-input v-model="key" placeholder="请输入关键字" clearable style="width: 20%;height: 47%;margin: auto 0;">
                <template #append>
                    <el-button @click="search()">
                        <el-icon>
                            <i class="iconfont icon-sousuo"></i>
                        </el-icon>
                    </el-button>
                </template>
            </el-input>
        </el-menu>
    </el-row>
</template>

<script>
import router from '@/router';
import { ElMessage } from 'element-plus';
import { ref } from 'vue';
import { useRoute } from 'vue-router';
export default {
    name: "navBarComponents",
    components: {

    },
    setup() {
        let route = useRoute();
        let index = ref(0);
        let key = ref('');
        let home = () => {
            router.push('/');
            index.value = 0;
        }
        let search = () => {
            if (key.value == '') {
                const open4 = () => {
                    ElMessage.error('清先输入内容');
                }
                open4();
                return;
            }
            router.push({ name: 'searchArticle', query: { key: key.value } });
        }

        return {
            key,
            search,
            route,
            home,
            index,
        }
    }
}

</script>

<style scoped>
.el-menu-item {
    font-size: medium;
    height: 70px;
}

.loginRow {
    display: flex;
    align-items: center;
    justify-content: center;
}

.login {
    color: rgb(203, 205, 199);
    font-size: small;
    margin-left: 10px;
}

.login:hover {
    color: orange;
    cursor: pointer;
}

.logo {
    height: 60px;
    width: 550px;
    cursor: pointer;
}

div:focus {
    outline: none;
}

.logo :not(.is-disabled):hover {
    background-color: rgb(255, 255, 255);
    border-bottom: 2px rgb(220, 223, 230);
}

.logo :not(.is-disabled):focus {
    background-color: rgb(255, 255, 255);
    border-bottom: 2px rgb(220, 223, 230);
}

/* .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
    background-color: rgb(255, 255, 255);
    border-bottom: 2px rgb(220, 223, 230);
}

.el-menu--horizontal .el-menu-item:not(.is-disabled):focus {
    background-color: rgb(255, 255, 255);
    border-bottom: 2px rgb(220, 223, 230);
} */
</style>